<template>
    <el-row :key="idx" style="margin-bottom:0" class="orders-row">
        <el-col :span="24"><div class="grid-content ch-first">{{groupData.group_name}}：（day {{idx+1}}, {{item.day}} days）</div>
        </el-col>
        <el-col :span="8">
            <div class="grid-content">
                <div class="blod">Day {{idx+1}}: <!-- <i class="el-icon-edit" @click="isEditProduct = !isEditProduct"></i> --></div>
                <div v-if="!isEditProduct">
                    <div  v-for="(pro, i) in groupData.product" :key="i">
                        <div v-if="pro.qty != 0">
                            {{ pro.qty }} x {{ pro.product_scode }} {{ pro.product_name }};
                        </div>

                    </div>
                </div>
                <!--<div v-if="!isEditProduct"><div  v-for="(pro, i) in groupData.product" :key="i">{{ pro.product_scode }} {{ pro.product_name }}；</div></div>-->
                <el-row v-if="isEditProduct">
                    <el-col v-for="(productItem, t) in groupData.product" :key="t" :span="4">
                        <el-select v-model="productItem.product_id" class="filter-item" :placeholder="$t('placeholder.select')"  style="width: 80px;" size="mini"  @change="changeProduct($event, productItem, t)">
                            <el-option v-for="(option, index) in products" :key="index" :label="option.product_name" :value="option.id" />
                        </el-select>
                        <div>
                            <input type="hidden" v-model="productItem.id" name="product_id[]">
                            <el-select v-model="productItem.qty" name="qty[]" class="filter-item" style="width: 60px;" size="mini" @change="changeQty($event, productItem, t)">
                                <el-option v-for="(option, index) in quantOptions" :key="index" :label="option" :value="option" />
                            </el-select>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content">
                <div class="blod">Day {{idx+1}} -Delivery Change:${{ groupData.freight }} <!-- <i class="el-icon-edit" @click="isEditLocation = !isEditLocation"></i> --></div>
                <div v-if="!isEditLocation">{{ isShow ? groupData.location_name + '-' + groupData.area_region_name +' '+ groupData.address : groupData.location_name}}</div>
                <div v-if="isEditLocation"> 
                    <el-select v-model="groupData.location_id" class="filter-item" :placeholder="$t('placeholder.select')"  style="width: 100px;" size="mini" @change="changeLocation($event, group)" >
                        <el-option v-for="(option, index) in locationOptions" :key="index" :label="option.name" :value="option.id" />
                    </el-select>
                </div>
            </div>
        </el-col>
        <el-col :span="3">
            <div class="grid-content"><div class="blod">Day {{idx+1}}: <i v-show="!showButton" class="el-icon-edit" @click="isEditScheduled = !isEditScheduled"></i></div>
                <div v-if="!isEditScheduled">{{formatData(new Date(groupData.scheduled_at)).substr(0, 10)}}</div>
                <div v-if="isEditScheduled">
                    <el-date-picker
                        v-model="groupData.scheduled_at"
                        type="date"
                        :placeholder="$t('placeholder.date')" size="mini"
                        value-format="yyyy-MM-dd"
                        style="width: 140px;" 
                        @change="changeScheduledAt($event, groupData)">
                    </el-date-picker> 
                </div> 
            </div>
        </el-col>
        <el-col :span="3"><div class="grid-content">{{groupData.ax_sync_item_status === 1 ? 'Yes' : 'No'}}</div></el-col>
        <el-col :span="4"><div class="grid-content"> <div>{{ groupData.status==1?groupData.updated_at:'Pending' }}</div><div class="pick"><span  v-show="!showButton" @click="changeStatus(groupData)">{{ groupData.status==0?'Picked Up':'Reset' }}</span></div></div></el-col>
    </el-row>
</template>
<script>
import { fetchUpdateOrderGroup } from '@/api/order'
import i18n from '@/lang/index'
import { formatData } from '@/utils'
export default {
    props: {
        idx: Number,
        item: Object,
        group: Object,
        locationOptions: Array,
        productOptions: Array,
        homeList: Array,
        showButton: Boolean
    },
    data () {
        return {
            quantOptions: [0, 1, 2, 3],
            isEditLocation: false,
            isEditScheduled: false,
            isEditProduct: false,
            groupData: JSON.parse(JSON.stringify(this.group)),
            products: [],
            formatData: formatData
        }
    },
    computed: {
        isShow() {
            let iss = false
            const val = this.groupData.location_id
            if (val && this.homeList.indexOf(val) > -1) {
                iss = true
            }
            return iss
        }
    },
    mounted () {
        let options = JSON.parse(JSON.stringify(this.productOptions))
        options.forEach(element => {
            element.qty = 1
            element.product_id = element.id
            element.product_name = element.name
            element.product_scode = element.scode
            return element
        })
        this.products = options
    },
    methods: {
        changeLocation(val, data) {
            let params = {
                id: data.id,
                location_id: val
            }
            fetchUpdateOrderGroup(this.groupData.id, params).then(() => {
                this.$notify({
                    title: 'Success',
                    message: 'Successful revision',
                    type: 'success',
                    duration: 2000
                })
            })
        },
        changeScheduledAt(val, data) {
            let params = {
                id: data.id,
                scheduled_at: val
            }
            fetchUpdateOrderGroup(this.groupData.id, params).then(() => {
                this.$notify({
                    title: 'Success',
                    message: 'Successful revision',
                    type: 'success',
                    duration: 2000
                })
            })
        },
        changeStatus(data) {
            let _this = this
            this.$confirm( i18n.t('dialog.confirm') + ' ' + (data.status==0?i18n.t('table.picked_up'):'Reset') + '？')
            .then(_ => {
                let status = data.status === 0 ? 1 : 0
                let params = {
                    id: data.id,
                    status: status
                }
                fetchUpdateOrderGroup(this.groupData.id, params).then(() => {
                    this.$notify({
                        title: 'Success',
                        message: 'Successful revision',
                        type: 'success',
                        duration: 2000
                    })
                    if (data.status === 0) {
                        _this.groupData.status = 1
                        _this.groupData.updated_at = formatData(new Date())
                    } else {
                        _this.groupData.status = 0
                        _this.groupData.updated_at = ''
                    }
                    _this.$emit('change-group', _this.groupData, _this.idx)
                })
            })
            .catch(_ => {})
        },
        changeProduct(el, old, index) {
            let productItem = {}
            let data = JSON.parse(JSON.stringify(old))
            let products = JSON.parse(JSON.stringify(this.groupData))
            this.products.forEach(element => {
                if(element.product_id === el) {
                    productItem = element
                }
            })
            data.product_id = productItem.product_id
            data.product_name = productItem.product_name
            data.product_scode = productItem.product_scode
            products.product[index] = data
            let params = {
                id: this.groupData.id,
                product: products.product
            }
            fetchUpdateOrderGroup(this.groupData.id, params).then(() => {
                this.$notify({
                    title: 'Success',
                    message: 'Successful revision',
                    type: 'success',
                    duration: 2000
                })
            })
            this.groupData.product = products.product
            // this.groupData.product[index] = productItem
        },
        changeQty(val, old, index) {
            let data = JSON.parse(JSON.stringify(old))
            data.qty = val
            let products = JSON.parse(JSON.stringify(this.groupData))
            products.product[index] = data
            let params = {
                id: this.groupData.id,
                product: products.product
            }
            fetchUpdateOrderGroup(this.groupData.id, params).then(() => {
                this.$notify({
                    title: 'Success',
                    message: 'Successful revision',
                    type: 'success',
                    duration: 2000
                })
            })
            this.groupData.product = products.product
            this.$emit('change-group', this.groupData, this.idx)
        }
    }
}
</script>
<style rel="stylesheet/scss" lang="scss">
 .orders-row {
        margin-bottom: 20px;
        border-bottom: 1px solid #e5e9f2;
        border-right: 1px solid #e5e9f2;
        .el-row {
            margin-bottom: 0;
            border:none;
        }
        .grid-content {
            padding: 5px;
            line-height: 20px;
            min-height: 50px;    
            border-left: 1px solid #e5e9f2;
            border-top: 1px solid #e5e9f2;
            &.ch-first{
                height: 28px;
                min-height: 25px;
                line-height: 25px;
                border-top: none;
            }
        }
        .pick{
            color:#409EFF;
            cursor: pointer;
        }
        .blod{
            font-weight: bold;
        }
    }
</style>
